<template>
    <div>
        <div class="common-layout">
            <el-container>
                <el-header>
                    <HeaderVue />
                </el-header>
                <el-container>
                    <el-aside width="200px">
                        <Nav></Nav>
                    </el-aside>
                    <el-main>
                        <Breadcrumb />
                        <div class="scroll-area">
                            <RouterView />
                        </div>
                    </el-main>
                </el-container>
            </el-container>
        </div>
    </div>
</template>

<script setup lang="ts">
import HeaderVue from '@/components/layouts/Header.vue';
import Nav from '@/components/layouts/Nav.vue';
import Breadcrumb from "@/components/Breadcrumb/index.vue";
import { RouterView } from "vue-router";



</script>

<style lang="less" scoped>
.el-header {
    background-color: #409eff;
    height: 70px;
}

.el-aside {
    height: calc(100vh - 70px);
    background-color: #304156;

    // 控制 滚动条的样式
    &::-webkit-scrollbar {
        width: 0;
    }
}

// .menu {
//     padding: 10px 20px 0;

//     .ums-admin {
//         margin-right: 20px;
//     }
// }
.el-main {
    background-color: #fff;
    color: #000;
    height: calc(100vh - 70px);

    .scroll-area {
        height: calc(100vh - 145px);
        overflow: auto;

        &::-webkit-scrollbar {
            width: 0;
        }
    }
}
</style>